<template>
  <div style="height:100%;width:100%;position:relative;">
      <div class="pagetop">
          <template>
              <div style="width:100%;">
                  <div style="float:left;width:50%">
                      <table style="font-size:12px" class="table1style">
                          <tr>
                              <td>快速查询</td>
                              <td>
                                  <el-input v-model="diagtable_seachkey" placeholder="费别代码、费别名称、输入码" style="width:200px" @keyup.enter.native="btnQuery"></el-input>
                              </td>
                              <td v-if="power4Type">医院</td>
                              <td>
                                  <el-select v-if="power4Type" v-model="ddlhospcode" placeholder="请选择" @change="btnQuery" style="width:230px" clearable>
                                      <el-option :key="item.value" :value="item.value" :label="item.label" v-for="item in HospitalOptions"></el-option>
                                  </el-select>
                              </td>
                          </tr>
                      </table>
                  </div>
                  <div style="float:left;width:50%;">
                      <table style="float:right">
                          <tr>
                              <td>
                                  <el-button @click="btnQuery" icon="el-icon-search" v-has="'PINQUERY'" type="primary">查询</el-button>
                                  <el-button @click="btnAdd" icon="el-icon-edit-outline" v-has="'PADD'">新增</el-button>
                                  <el-button @click="btnDel" icon="el-icon-delete-solid" v-has="'PDELETE'">删除</el-button>
                                  <el-button @click="btnSave" icon="el-icon-document-add">保存</el-button>
                                  <el-button @click="btnExport" icon="el-icon-upload2" v-has="'PEXPORT'">导出</el-button>
                                  <el-button @click="btnSync" icon="el-icon-position" v-has="'PSYNC'">同步</el-button>
                              </td>
                          </tr>
                      </table>
                  </div>
              </div>
          </template>
      </div>
      <div class="pagecenter">
          <div class="middle-center" style="height:100%;">
              <vxe-table :data.sync="xTableData" :loading="diagtable_Loading" :select-config="{reserve: true}" :sort-config="{trigger: 'cell'}" border height="auto" highlight-current-row highlight-hover-column highlight-hover-row how-header-overflow ref="xTable" resizable show-overflow size="mini" stripe :row-class-name="RowClassName" :cell-class-name="CellClassName" show-header-overflow :optimization="{animat: false}" :edit-config="{trigger: 'click', mode: 'cell',showStatus:true,activeMethod:CellActiveMethod}" :edit-rules="diagtable_validRules" :keyboard-config="keyConfig" @edit-closed="EditClose">
                  <vxe-table-column type="selection" width="35" align="center"></vxe-table-column>
                  <vxe-table-column key="chargetypeno" field="chargetypeno" sortable title="费别代码" width="120" :edit-render="{name: 'input'}" show-overflow></vxe-table-column>
                  <vxe-table-column key="chargetypename" field="chargetypename" sortable title="费别名称" width="150" :edit-render="{name: 'input'}" show-overflow></vxe-table-column>
                  <vxe-table-column field="hospcode" title="所属院区" width="230" :edit-render="{name:'select', options: HospitalOptions}" :disabled="true">
                  </vxe-table-column>
                  <vxe-table-column key="his_chargetypeno" field="his_chargetypeno" sortable title="HIS代码" width="160" :edit-render="{name: 'input'}" show-overflow></vxe-table-column>
                  <vxe-table-column key="description" field="description" sortable title="备注说明" width="200" :edit-render="{name: 'input'}" show-overflow></vxe-table-column>
                  <vxe-table-column key="inputcode" field="inputcode" sortable title="输入码" width="160" :edit-render="{name: 'input'}" show-overflow></vxe-table-column>
                  <vxe-table-column key="chargetypekind" field="chargetypekind" sortable title="费别大类" width="200" show-overflow>
                      <template v-slot="{ row }">
                          <el-select v-model="row.chargetypekind" style="width:160px">
                              <el-option v-for="item in g_chargetypekind" :key="item.codeno" :label="item.codena" :value="item.codeno">
                              </el-option>
                          </el-select>
                      </template>
                  </vxe-table-column>
                  <vxe-table-column key="bldck" field="bldck" sortable title="输血收费类别" width="200" show-overflow>
                      <template v-slot="{ row}">
                          <el-select v-model="row.bldck" style="width:160px">
                              <el-option v-for="item in g_bldck" :key="item.codeno" :label="item.codena" :value="item.codeno">
                              </el-option>
                          </el-select>
                      </template>
                  </vxe-table-column>
              </vxe-table>
          </div>
      </div>
  </div>
</template>

<script type="text/javascript">
import XE from "xe-utils"; //引入工具类
export default {
  name: "MNG214",
  data() {
      return {
          xTableData: [],
          HospitalOptions: [],
          power4Type: false,
          diagtable_Loading: false,
          ddlhospcode: "",
          diagtable_seachkey: "",
          diagtable_validRules: {
              chargetypeno: [{ required: true, message: "必须填写" }],
              chargetypename: [{ required: true, message: "必须填写" }],
              hospcode: [{ required: true, message: "必须填写" }],
              his_chargetypeno: [{ required: true, message: "必须填写" }],
          },
          keyConfig: {
              isDel: true,
              isTab: true,
              isEdit: true,
              isArrow: true,
          },
          g_chargetypekind: [],
          g_bldck: [],
      };
  },
  created() {
      this.$ddldata.IsAreaModeFun().then((r) => {
          this.GetUtype();
      }); //防止刷新页面导致IsAreaMode被清掉
      this.get_selectvalues();
      this.ddlInitdata();
      this.btnQuery();
  },
  mounted() {},
  updated() {},
  methods: {
      btnQuery() {
          this.diagtable_Loading = true;
          let _this = this;
          this.$tool
              .request({
                  url: "MNG/MNG2/MNG214",
                  method: "post",
                  data: {
                      action: "diag_query",
                      keystr: _this.diagtable_seachkey,
                      ddlhospcode: this.ddlhospcode,
                  },
              })
              .then((res) => {
                  _this.xTableData = res.Data;
                  _this.diagtable_Loading = false;
              })
              .catch((e) => {
                  this.$message.error(e);
              });
      },
      get_selectvalues() {
          let _this = this;
          this.$tool
              .request({
                  url: "MNG/MNG2/MNG214",
                  method: "post",
                  data: {
                      action: "get_selectvalues",
                  },
              })
              .then((res) => {
                  _this.g_chargetypekind = res[0];
                  _this.g_bldck = res[1];
              })
              .catch((e) => {
                  this.$message.error(e);
              });
      },
      btnAdd() {
          let record = {
              chargetypeno: "",
              chargetypename: "",
              hospcode: this.$ddldata.IsAreaMode ? this.$tool.getSession(this.$tool.selectedhis) : "All",
              his_chargetypeno: "",
              inputcode: "",
              chargetypekind: "",
              bldck: "",
              description: "",
          };
          this.$refs.xTable.insert(record);
          this.$nextTick(() => {
              this.FunscrollY();
          });
      },
      FunscrollY() {
          this.$nextTick(() => {
              var alldataLen = this.$refs.xTable.tableData.length;
              let L = this.$refs.xTable.tableData[alldataLen - 1];
              this.$refs.xTable.setCurrentRow(L);
              this.$refs.xTable.setActiveRow(L, "chargetypeno");
              this.$refs.xTable.scrollToRow(L);
          });
      },
      btnDel() {
          let removeRecords = this.$refs.xTable.getSelectRecords();
          if (removeRecords.length <= 0) {
              this.$message.error("请先选择数据！");
              return false;
          }
          this.$confirm("此操作将删除该数据, 是否继续?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
          })
              .then(() => {
                  this.$refs.xTable.removeSelecteds();
              })
              .catch(() => {});
      },
      btnSave() {
          this.$refs.xTable.validate((valid) => {
              if (valid) {
                  let removeRecords = this.$refs.xTable.getRemoveRecords();
                  let updateRecords = this.$refs.xTable.getUpdateRecords();
                  let insertRecords = this.$refs.xTable.getInsertRecords();
                  let _this = this;
                  this.$tool
                      .request({
                          url: "MNG/MNG2/MNG214",
                          method: "post",
                          data: {
                              action: "save_diagnose",
                              removeRecords: removeRecords,
                              updateRecords: updateRecords,
                              insertRecords: insertRecords,
                          },
                      })
                      .then((res) => {
                          if (res == "1") {
                              _this.$message({
                                  message: "保存成功！",
                                  type: "success",
                              });
                              _this.btnQuery();
                          } else {
                              _this.$message.error(res);
                          }
                      })
                      .catch((e) => {
                          _this.$message.error(e);
                      });
              } else {
                  this.$message.error("主键校验错误！");
                  return false;
              }
          });
      },
      btnExport() {
          this.$refs.xTable.exportCsv({ filename: "收费类型" });
      },
      EditClose({ row, column, rowIndex }) {
          // rowIndex = rowIndex - 1;
          // let insertRecords = this.$refs.diagTable.getInsertRecords();
          // let lengthtable = this.xTableData.length + insertRecords.length;
          // if (column.property == "drgsno" && lengthtable == rowIndex + 2) {
          //     console.log(lengthtable + "---" + rowIndex);
          //     this.btnAdd();
          // }

          if (column.property == "chargetypename") {
              let rowinputcode = "";
              let getpinyin = this.$pinyin(row.chargetypename, {
                  style: this.$pinyin.STYLE_FIRST_LETTER, // 首字母
                  heteronym: true,
              });
              for (var i = 0; i < getpinyin.length; i++) {
                  var curchar = getpinyin[i];
                  if (curchar.length > 1) {
                      rowinputcode += curchar[0];
                  } else {
                      rowinputcode += curchar;
                  }
              }
              row.inputcode = rowinputcode.toUpperCase();
          }
      },
      ddlInitdata() {
          this.$tool
              .request({
                  url: "MNG/MNG2/MNG214",
                  method: "post",
                  data: {
                      action: "ddlbtnQuery",
                  },
              })
              .then((response) => {
                  this.HospitalOptions = response.dt1;
              });
      },
      btnSync() {
          this.diagtable_Loading = true;
          this.$tool
              .request({
                  url: "MNG/MNG2/MNG214",
                  method: "post",
                  data: {
                      action: "syncdata",
                  },
              })
              .then((response) => {
                  if (response.err == 0) {
                      let msg = response.msg;
                      if (!msg) msg = "同步数据获取失败！";
                      this.bLoading = false;
                      this.$alert(msg);
                      this.diagtable_Loading = false;
                      return;
                  }
                  let data = response.data;

                  data.forEach((item) => {
                      let rest = this.xTableData.filter((element) => element.chargetypeno == item.chargetypeno);
                      if (rest.length > 0) {
                          try {
                              rest.forEach((ele) => {
                                  if (ele.chargetypeno == item.chargetypeno) {
                                      ele.chargetypename = item.chargetypename;
                                      ele.his_chargetypeno = item.his_chargetypeno == "" ? ele.chargetypeno : item.his_chargetypeno;
                                      ele.description = ele.chargetypename == item.chargetypename ? null : item.chargetypename;
                                      ele.inputcode = item.inputcode;
                                      ele.hospcode = item.hospcode;
                                      throw Error();
                                  }
                              });
                          } catch (e) {}
                      } else {
                          let initialdata = {
                              chargetypeno: item.chargetypeno,
                              chargetypename: item.chargetypename,
                              his_chargetypeno: item.his_chargetypeno,
                              description: null,
                              inputcode: item.inputcode,
                              hospcode: item.hospcode,
                          };
                          this.$refs.xTable.insert(initialdata);
                      }
                  });
                  this.diagtable_Loading = false;
                  this.$message({
                      type: "warining",
                      message: "收费类型字典数据更新完成！",
                  });
              })
              .catch((e) => {
                  console.log("error", e);
                  this.diagtable_Loading = false;
              });
      },
      GetUtype() {
          let loginutype = this.$tool.getSession(this.$tool.loginutype);
          if (this.$ddldata.IsAreaMode) {
              this.power4Type = true;
          } else {
              this.power4Type = false;
          }
      },
      hospitalChange(code, name) {
          this.ddlhospcode = code;
          this.btnQuery();
      },
      CellActiveMethod({ row, column }) {
          let loginutype = this.$tool.getSession(this.$tool.loginutype);
          if (this.$ddldata.IsAreaMode) {
              //区域LIS模式下:非管理员,禁止编辑Hospcode字段及Hospcode=All的整行数据
              if (loginutype != "G" && loginutype != "R") {
                  if (column.property == "hospcode") {
                      return false;
                  } else {
                      if (row.hospcode == "All") {
                          return false;
                      } else {
                          return true;
                      }
                  }
              } else {
                  return true;
              }
          } else {
              return true;
          }
      },
      RowClassName({ row, rowIndex }) {
          let loginutype = this.$tool.getSession(this.$tool.loginutype);
          let isDirty = this.$refs.xTable.hasRowChange(row);
          if (this.$ddldata.IsAreaMode) {
              if (this.$refs.xTable.hasRowInsert(row)) return "row-new";
              //区域LIS模式下:非管理员,禁止编辑Hospcode字段及Hospcode=All的整行数据
              if (loginutype != "G" && loginutype != "R") {
                  if (row.hospcode == "All") {
                      return "rm-disable";
                  }
              }
          }
          if (isDirty) {
              return "row-modify";
          } else {
              if (row.invalidflag == "1") {
                  return "rm-alert";
              }
          }
      },
      CellClassName({ column, columnIndex, row }) {
          let loginutype = this.$tool.getSession(this.$tool.loginutype);
          if (columnIndex == "0") {
              return "col-gray";
          } else {
              if (this.$ddldata.IsAreaMode) {
                  if (column.property == "hospcode" && loginutype != "G" && loginutype != "R") {
                      return "col-gray";
                  } else {
                      return "";
                  }
              }
          }
      },
  },
};
</script>

<style scoped>
.pagetop {
  width: 100%;
  height: 35px;
  display: -webkit-box;
  -webkit-box-pack: left;
  -webkit-box-align: center;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 99;
}

.pagecenter {
  position: absolute;
  top: 40px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}

.middle-center {
  position: absolute;
  height: 100%;
  left: 0px;
  right: 0px;
  overflow: auto;
}
.poppagetop {
  width: 100%;
  height: 40px;
  -webkit-box-pack: left;
  -webkit-box-align: center;
  position: absolute;
  border: 1px solid #ccc;
  z-index: 999;
}
.poppagecenter {
  position: absolute;
  top: 50px;
  width: 100%;
  left: 0;
}
.popmiddle-left {
  background-color: aqua;
  position: absolute;
  height: 450px;
  width: 480px;
  left: 0px;
  overflow: auto;
}
.popmiddle-center {
  position: absolute;
  -webkit-box-align: center;
  height: 100%;
  left: 485px;
  right: 485px;
}
.popmiddle-right {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 450px;
  width: 480px;
  right: 0px;
  border: 1px solid #ccc;
}
.table1style tr td {
  padding: 0px 2px 0px 5px;
}
/deep/.middle-center tr td div .el-input__inner {
  border: 1px solid rgba(255, 254, 254, 0) !important;
  background-color: rgba(255, 254, 254, 0) !important;
}
/deep/ .mytable-style.vxe-table .vxe-body--column.col-orange {
  background-color: #ccc;
}
/deep/ tr.vxe-body--row.row-modify {
  color: blue !important;
}
/deep/ tr.vxe-body--row.row-new {
  color: #cc6600 !important;
}
</style>